import { useObserver } from 'mobx-react'
import styles from './index.module.less'
import useWelcomeByRole from '../../hooks/useWelcomeByRole'
import NoticeSwiper from '../NoticeSwiper'

/** 头部 */
const Header = () => {
    const { roleName, nowTime, nowWeekly, welcome } = useWelcomeByRole()

    return useObserver(() => {
        return (
            <div className={styles.header}>
                <span className={styles.header_welcome}>
                    {welcome}，{roleName}
                </span>

                <span className={styles.header_date}>
                    {nowTime} {nowWeekly}
                </span>

                <NoticeSwiper className={styles.header_banner} />
            </div>
        )
    })
}

export default Header
